<template>
	<view class="shopEdit">
		<navBar isBack backColor="#333" title="商品编辑" color="#333" background="#fff"></navBar>
		<!--  -->
		<view class="content">
			<view class="top">
				<view class="imgBox">
					<view class="item" v-for="(item,index) in bannerImg" :key="index">
						<image :src="item.image_path" mode=""></image>
						<image class="delImg" @click="delImg(index)" :src="`${baseImg}/static/adminShop/delImg.png`" mode=""></image>
					</view>
					<view class="upImg" @click="upImg">
						<image :src="`${baseImg}/static/adminShop/camare.png`" mode=""></image>
						照片/视频
					</view>
				</view>
				<view class="textBox">
					首张为主图（拖拽可排序），共可上传9张
				</view>
			</view>
			<view class="shopInfo">
				<view class="item">
					<view class="left">
						商品名称
						<input type="text" value="" v-model="shopInfo.product_title" placeholder="请输入" />
					</view>
				</view>
				<view class="item">
					<view class="left">
						商品类型
						<input type="text" :value="shopType" disabled="true"  />
					</view>
				</view>
				 
				<view class="item" @click="toSelectCate">
					<view class="left">
						商品分类
						<input type="text" v-model="cateName" placeholder="请输入"/>
						
					</view>
					<view class="iconfont icon-jinru"></view>
				</view>
				<view class="item" style="border: 0;" @click="toShopType">
					<view class="left">
						商品属性
						<view class="s_type">
							<span v-for="(item,index) in shopTypeList" :key="index">{{item==1?'推荐,':item==2?'新品,':item==3?'热卖,':item==4?'包邮,':''}}</span>
						</view>
					</view>
					<view class="iconfont icon-jinru"></view>
				</view>
			</view>
			<!-- 多规格 -->
			<view class="shopSpec" v-if="shopInfo.specs_type==2">
				商品规格
				<text>多规格商品PC端可查看编辑</text>
			</view>
			<!-- 单规格 -->
			<view class="shopSpec_only" v-else>
				<view class="price">
					<!-- <view class="item">
						<view class="left">
							<span>原价</span>
							<input type="text" v-model="shopInfo.primary_price" value="" placeholder="请输入" />
						</view>
					</view>
					<view class="item">
						<view class="left">
							<span>现价</span>
							<input type="text" v-model="shopInfo.price" value="" placeholder="请输入" />
						</view>
					</view>
					<view class="item" style="border: 0;">
						<view class="left">
							<span>成本价</span>
							<input type="text" v-model="shopInfo.cost_price" value="" placeholder="请输入" />
						</view>
					</view> -->
					<view class="item">
						<view class="left">
							<span>原价</span>
							<input type="text" v-model="shopInfo.primary_price" value="" placeholder="请输入" />
						</view>
					</view>
					<view class="item">
						<view class="left">
							<span>售价</span>
							<input type="text" v-model="shopInfo.price" value="" placeholder="请输入" />
						</view>
					</view>
					<view class="item">
						<view class="left">
							<span class="tit">抽成比例（%）</span>
							<input type="text" v-model="rate" value="" placeholder="请输入" />
						</view>
					</view>
					<view class="item">
						<view class="left">
							<span class="tit">分销商城分销价</span>
							<input type="text" disabled v-model="shopInfo.rate_price" value="" placeholder="请输入" />
						</view>
					</view>
					<view class="item" style="border: 0;">
						<view class="left">
							<span class="tit">选材中心供货价</span>
							<input type="text" disabled v-model="shopInfo.cost_price" value="" placeholder="请输入" />
						</view>
					</view>
				</view>
				<view class="price">
					<view class="item">
						<view class="left">
							<span>库存</span>
							<input type="text" v-model="shopInfo.num" value="" placeholder="请输入" />
						</view>
					</view>
					<view class="item" @click="openAllNum">
						<view class="left">
							<span>库存设置</span>
							<input type="text" value="" v-model="allNum_name" placeholder="请选择" disabled />
						</view>
						<view class="iconfont icon-jinru"></view>
					</view>
					<view class="item" style="border: 0;">
						<view class="left">
							<span>显示库存</span>
						</view>
						<u-switch size="40" @change="openSpecOnly_sw" active-color="#E3BA71" v-model="specOnly_sw"></u-switch>
					</view>
				</view>
			</view>
			<view class="shopUp">
				<view class="item">
					商品上架
					<u-switch size="40" @change="openUpStore_sw" active-color="#E3BA71" v-model="upStore_sw"></u-switch>
				</view>
				<view class="sort">
					商品排序
					<input type="text" v-model="shopInfo.sort" value="" />
				</view>
			</view>
		</view>
		<view class="btn">
			<button type="default" @click="toSubmit">保存</button>
		</view>
		<u-select v-model="cateShow" :default-value="defCate" mode="mutil-column-auto" :list="cateList" @confirm="cateSelect"></u-select>
		<u-picker mode="selector" v-model="numShow" @confirm="allNumFn" :range="allNumList" range-key="name"></u-picker>
	</view>
</template>

<script>
	import URL from '@/config/url.js'
	export default{
		data(){
			return{
				baseImg:this.$static,
				upStore_sw:false,//上架
				specOnly_sw:false,//显示库存
				product_id:null,
				shopInfo:{},
				allNumList:[{
					name:'拍下减库存',
					value:1
				},{
					name:'付款减库存',
					value:2
				},{
					name:'永不减库存',
					value:3
				}],
				allNum_name:'',
				allNum_id:null, //减库存方式
				shopType:'',
				shopTypeList:[], //商品属性
				cateShow:false,//分类弹框
				cateList:[],
				numShow:false,
				bannerImg:[],
				cateName:'',
				cate_id:null,
				defCate:[0,0],
				rate:'', //比率
			}
		},
		onLoad(options) {
			this.product_id = options.product_id
			this.getShopInfo()
		},
		computed:{
			
		},
		methods:{
			// 获取商品详情
			async getShopInfo(){
				await this.getShopCate()
				uni.showLoading({
					title:'加载中...'
				})
				let params = {
					product_id:this.product_id,
					store_id:this.$store.state.index.sid
				}
				let res = await this.$api.getShopDetail(params)
					console.log(res,'商品详情')
					if(res.code==1){
						let type = res.data.product_type
						this.shopType = type==1?'实体商品':type==2?'虚拟商品':type==3?'卡密':type==4?'批发商品':'计次/计时商品'
						this.shopInfo = res.data?res.data:{}
						this.specOnly_sw = res.data.is_show_stock==1?true:false
						this.upStore_sw = res.data.status==1?true:false
						this.shopTypeList = res.data.s_type.split(',')
						this.allNum_id = res.data.stock_type
						this.allNum_name = res.data.stock_type==1?'拍下减库存':res.data.stock_type==2?'付款减库存':res.data.stock_type==3?'永不减库存':''
						console.log(this.shopTypeList,'属性')
						this.bannerImg = res.data.round_imgs
						this.cate_id = res.data.cate_id
						this.rate = res.data.rate*100
						this.cateList.map((item,index)=>{
							// console.log(index,'11111111')
							item.children.map((item1,index1)=>{
							// console.log(item1,'222222')
								if(item1.value==res.data.cate_id){
									console.log(item,item1,'---------------')
									this.cateName = item1.label
									this.defCate = [index,index1]
								}
							})
						})
						console.log(this.cateName,'分类名称')
						console.log(this.defCate,'分类默认')
						uni.hideLoading()
						// this.defCate = res.data.
					}
			},
			// 获取商品分类
			async getShopCate(){
				let res = await this.$api.getCate()
					console.log(res,'分类')
					if(res.code==1){
						let list=[]
						res.data.map(item=>{
							let obj = {
								value:item.cate_id,
								label:item.cate_name,
								children:[]
							}
							item.child.map(item1=>{
								let obj1={
									value:item1.cate_id,
									label:item1.cate_name
								}
								obj.children.push(obj1)
							})
							list.push(obj)
						})
						this.cateList = list
					}
			},
			// 进入商品属性
			toShopType(){
				let type = this.shopTypeList.join(',')
				uni.navigateTo({
					url:'shopType?type='+type
				})
			},
			// 进入商品分类
			toSelectCate(){
				// uni.navigateTo({
				// 	url:'selectCate'
				// })
				this.cateShow = true
			},
			// 单规格显示库存
			openSpecOnly_sw(){
				
			},
			
			// 商品上架
			openUpStore_sw(){
				
			},
			
			// 打开库存设置弹框
			openAllNum(){
				this.numShow = true
			},
			// 库存弹窗确定
			allNumFn(e){
				console.log(e,'====')
				let index = e[0]
				this.allNum_name = this.allNumList[index].name
				this.allNum_id = this.allNumList[index].value
			},
			
			// 分类选择
			cateSelect(e){
				console.log(e,'分类选择')
				this.cateName = e[1].label
				this.cate_id = e[1].value
			},
			
			// 保存
			toSubmit(){
				let imgId = []
				this.bannerImg.map(item=>{
					imgId.push(item.image_id)
				})
				let round_imgs = imgId.join(',')
				let params = {
					product_id:this.product_id,
					store_id:this.$store.state.index.sid,
					product_title:this.shopInfo.product_title,
					cate_id:this.cate_id,
					round_imgs,
					s_type:this.shopTypeList.join(','),
					status:this.upStore_sw?1:0,
					sort:this.shopInfo.sort,
					price:this.shopInfo.price,
					cost_price:this.shopInfo.cost_price,
					primary_price:this.shopInfo.primary_price,
					is_show_stock:this.specOnly_sw?1:0,
					stock_type:this.allNum_id,
					num:this.shopInfo.num,
					rate:this.rate/100
				}
				this.$api.toEditShopInfo(params).then(res=>{
					console.log(res,'编辑结果')
					if(res.code==1){
						uni.showToast({
							title:'保存成功',
							icon:'success'
						})
						
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			
			// 删除图片
			delImg(index){
				this.bannerImg.splice(index,1)
			},
			// 上传图片
			upImg(){
				if(this.bannerImg.length>9){
					uni.showToast({
						title:'上传图片已达上限!',
						icon:'none'
					})
					return 
				}
				uni.chooseImage({
					count:1,
				    success: (res) => {
				        const tempFilePaths = res.tempFilePaths;
				        uni.uploadFile({
				            url: URL.ENTER_UPLOAD_IMAGE,
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								uni.showLoading({
									title:'上传中'
								})
				                console.log(uploadFileRes.data);
								let data = JSON.parse(uploadFileRes.data)
								if(data.code==1){
									let obj = {
										img_id:data.data.id,
										image_path:data.data.url
									}
									this.bannerImg.push(obj)
									uni.showToast({
										title:'上传成功',
										icon:'success'
									})
								}else{
									uni.showToast({
										title:data.msg,
										icon:'none'
									})
								}
								setTimeout(function(){
									uni.hideLoading()
								},500)
				            }
				        });
				    }
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shopEdit{
		.content{
			margin-bottom: 144rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			.top{
				padding: 40rpx 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				width: 702rpx;
				margin: 24rpx auto;
				.imgBox{
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					grid-gap: .5rem;
					.item{
						position: relative;
						width: 210rpx;
						height: 210rpx;
						border-radius: 8rpx;
						image{
							width: 210rpx;
							height: 210rpx;
							border-radius: 8rpx;
						}
						.delImg{
							width: 44rpx;
							height: 44rpx;
							position: absolute;
							top: 0;
							right:0;
						}
					}
					.upImg{
						width: 210rpx;
						height: 210rpx;
						background-color: #F8F8F8;
						border-radius: 8rpx;
						font: 400 26rpx/40rpx PingFang SC;
						color: #0A0605;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						image{
							width: 72rpx;
							height: 72rpx;
						}
					}
				}
				.textBox{
					margin-top: 24rpx;
					width: 646rpx;
					height: 56rpx;
					background-color: #F8F8F8;
					border-radius: 8rpx;
					font: 400 24rpx/56rpx PingFang SC;
					color: #A0A0A0;
					text-align: center;
				}
			}
			.shopInfo{
				width: 702rpx;
				margin: 24rpx auto;
				border-radius: 16rpx;
				background-color: #fff;
				padding: 8rpx 28rpx;
				.item{
					padding: 32rpx 0;
					border-bottom: 2rpx solid #F5F5F5;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
						color: #A0A0A0;
						font: 400 26rpx/40rpx PingFang SC;
						input{color: #0A0605;margin-left: 60rpx;}
						.s_type{
							color: #0A0605;margin-left: 60rpx;
							
						}
					}
					.iconfont{
						font-size: 26rpx;
						color: #A0A0A0;
					}
				}
			}
			.shopSpec{
				width: 702rpx;
				background-color: #fff;
				margin: 24rpx auto;
				border-radius: 16rpx;
				padding: 40rpx 28rpx;
				color: #A0A0A0;
				font: 400 26rpx/40rpx PingFang SC;
				text{color: #0A0605;margin-left: 60rpx;}
			}
			.shopSpec_only{
				.price{
					width: 702rpx;
					background-color: #fff;
					margin: 24rpx auto;
					border-radius: 16rpx;
					padding: 8rpx 28rpx;
					color: #A0A0A0;
					font: 400 26rpx/40rpx PingFang SC;
					.item{
						padding: 32rpx 0;
						border-bottom: 2rpx solid #F5F5F5;
						display: flex;
						align-items: center;
						justify-content: space-between;
						span{width: 166rpx;}
						.tit{
							width: 220rpx;
						}
						.left{
							display: flex;
							align-items: center;
							color: #A0A0A0;
							font: 400 26rpx/40rpx PingFang SC;
							input{color: #0A0605;}
						}
						.iconfont{
							font-size: 26rpx;
							color: #A0A0A0;
						}
					}
				}
			}
			.shopUp{
				width: 702rpx;
				background-color: #fff;
				margin: 24rpx auto;
				border-radius: 16rpx;
				padding: 8 28rpx;
				color: #A0A0A0;
				font: 400 26rpx/40rpx PingFang SC;
				.item{
					padding: 32rpx;
					border-bottom: 2rpx solid #F5F5F5;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.sort{
					padding: 32rpx;
					display: flex;
					align-items: center;
					input{
						margin-left: 60rpx;
					}
				}
			}
		}
		
		.btn{
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			position: fixed;
			left: 0;
			z-index: 10;
			bottom: 0;
			height: calc(120rpx+ constant(safe-area-inset-bottom));
			height: calc(120rpx + env(safe-area-inset-bottom));
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			button{
				width: 606rpx;
				height: 80rpx;
				border-radius: 46rpx;
				margin: 20rpx auto;
				background: linear-gradient(86deg, #DBA954 0%, #EABA6A 100%);
				box-shadow: 0px 3px 6px rgba(219, 169, 84, 0.3);
				font: 500 32rpx/80rpx PingFang SC;
				color: #fff;
				
			}
		}
	}
</style>
